<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery和HTML之灯亮</title>
    <style type="text/css">
        span {
            text-align: center;
            font-weight: bold;
        }
    </style>
    <script src="./../lib/jquery-3.7.0.min.js"></script>
</head>
<body>
<div id="con">
    <div>
        <img src="./../asset/images/灯灭.png" alt="灯灭">
    </div>
    <span>灯灭了！</span>
</div>
<script>
    let status = false;
    $("#con").click(
        function function_1() {
            let image = $("img");
            let text = $("span");

            if (status) {
                image.attr("src", "./../asset/images/灯亮.png");
                text.html("灯亮了！");
                text.css({
                    "color": "red",
                    "font-weight": "bold"
                });
                status = false;
            } else {
                image.attr("src", "./../asset/images/灯灭.png");
                text.html("灯灭了！");
                text.css({
                    "color": "black",
                    "font-weight": "bold"
                });
                status = true;
            }
        })
</script>
</body>
</html>